<template>
  <main>
    <div id="login">
      <header>校园疫情管理系统</header>
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginFormRef"
        status-icon
        label-position="left"
        label-width="70px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input
            prefix-icon="iconfont icon-user"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input
            prefix-icon="iconfont icon-3702mima"
            v-model="loginForm.password"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 用户类型 -->
        <el-radio-group v-model="loginForm.type">
          <el-radio label="1" border size="medium" aria-checked
            >管理员</el-radio
          >
          <el-radio label="2" border size="medium">学生</el-radio>
          <el-radio label="3" border size="medium">教师</el-radio>
        </el-radio-group>

        <!-- 提交重置 -->
        <div class="button">
          <el-button type="primary" @click="submitForm()">立即登录</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </div>
      </el-form>
    </div>
  </main>
</template>

<script>
import { reqLogin } from "@/network/users/login.js";
export default {
  name: "Login",
  data() {
    return {
      // 登录数据
      loginForm: {
        username: "",
        password: "",
        type: null,
      },
      // 登录验证规则
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 重置表单
    resetForm() {
      this.$refs.loginFormRef.resetFields();
    },
    // 提交表单
    submitForm() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const res = await reqLogin(this.loginForm);
        if (res.status != 200) {
          this.$refs.loginFormRef.resetFields();
          return this.$message.error(`${res.statusText}`);
        }
        this.$message.success(
          `欢迎${res.userInfo.username}进入校园疫情管理系统~~~~~`
        );
        window.sessionStorage.setItem("token", res.token);

        if (this.loginForm.type == 1) {
          console.log(1);
          this.$router.push("/admin");
        }
        if (this.loginForm.type == 2) {
          this.$router.push("/student");
        }
        if (this.loginForm.type == 3) {
          this.$router.push("/teacher");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
main {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
#login {
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
  padding: 20px 10px;
  border: 1px solid #ccc;
  width: 400px;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  header {
    border-bottom: 1px dashed #ccc;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 600;
  }
  .el-radio-group,
  .button {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    .el-button:nth-child(1) {
      margin-right: 10px;
    }
  }
}
</style>>